<template>
    <view class="content">
        <u-navbar :is-back="false" :border-bottom="false" title=" " :background="top_bg_color">
            <view class="nav_menu" @click="$gTo(`/pages/city/city`)">
                <image src="@/static/icon/index/loc.png" class="ico"></image>{{ city || '请选择城市' }}<image
                    src="@/static/icon/index/arrow.png" class="arrow"></image>
            </view>
        </u-navbar>
        <view class="top_bannerx" v-if="bannerx.length > 0">
            <view class="bannerx">
                <u-swiper :list="bannerx" :height="300" @click="toGuangGao($event, data.slides)"></u-swiper>
            </view>
        </view>
        <view class="noticex" v-if="notice.length > 0">
            <image src="@/static/icon/index/notice.png" class="ico"></image>
            <u-notice-bar class="txx" :volume-icon="false" type="none" mode="vertical" :list="notice" :font-size="24"
                color="#808080" padding="18rpx 0rpx" @click="toDetails(data.notice, $event)"></u-notice-bar>
            <view class="morex" @click="goNotice">
                <text class="tt">更多</text>
                <image src="@/static/icon/index/morex.png" class="more"></image>
            </view>
        </view>

        <view class="nav_list" v-if="data.mainNavs.length > 0">
            <view class="item" v-for="(item,index) in data.mainNavs" :key="index" @click="goBanner(item)">
                <image :src="item.image_uri" class="ico"></image>
                <view class="tt">{{item.title}}</view>
            </view>
        </view>

        <image v-if="data.mainAds&&data.mainAds[0]&&data.mainAds[0].image_uri" :src="data.mainAds[0].image_uri"
            class="adx1" @click="toGuangGao(0, data.mainAds)"></image>

        <view class="market" v-if="data.market && data.market.content && data.market.content.length > 0">
            <view class="top_title">
                <view class="mex">
                    <image src="@/static/icon/index/icox.png" class="ico"></image>
                    <view class="tt text-bold">行情</view>
                </view>
            </view>
            <view class="tablex">
                <view class="titlex">{{data.market.title}}</view>
                <view class="list">
                    <!-- type=0稳定 1涨 2跌 -->
                    <view class="item" :class="{red : item.type == 1, green : item.type == 2}"
                        v-for="(item, index) in data.market.content" :key="index">
                        <view class="t1 u-line-1">{{item.address}}</view>
                        <view class="t2 u-line-1">{{item.price}}</view>
                        <view class="t3 u-line-1">
                            {{item.type_txt}}
                            <text v-if="item.type != 0">{{item.value}}</text>
                        </view>
                    </view>
                </view>
                <view class="tlx" v-if="data.market.prompt">温馨提示：{{data.market.prompt}}</view>
            </view>
        </view>

        <view class="news" v-if="data.news && data.news.length > 0">
            <view class="top_title">
                <view class="mex">
                    <image src="@/static/icon/index/icox2.png" class="ico"></image>
                    <view class="tt text-bold">新闻资讯</view>
                </view>
                <view class="more" @click="goNews">查看更多</view>
            </view>
            <view class="list">
                <view class="item" v-for="(item,index) in data.news" :key="index" @click="goNews(item.id)">
                    <image :src="item.title_pic_url" class="pic"></image>
                    <view class="texx">
                        <view class="t1 u-line-1">{{item.title}}</view>
                        <view class="spx u-line-2">{{item.ftitle}}</view>
                        <view class="times">{{item.create_time}}</view>
                    </view>
                </view>
            </view>
        </view>
        <view style="height: 40rpx;"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                top_bg_color: { backgroundColor: "#00734c"},
                bannerx: [],
                notice: [],
                data: {},
                city: '',
				service: {},
            };
        },
        onShareAppMessage(res) {
        	return {
                title: this.service.site_name,
                path: '/pages/tabbar/index'
        	}
        },
        onShareTimeline(){
            return {
                title: this.service.site_name,
                path: '/pages/tabbar/index'
            }
        },
        onLoad() {
            // 接收切换城市监听
            uni.$on("CHOOSE_CITY", info => {
                this.$setSync('CITY_NAME', info.name)
                this.$setSync('CITY_ID', info.id)
                this.city = info.name
            })
        },
        onShow() {
            if (!this.$getSync('CITY_NAME')) {
                this.getCity()
            } else {
                this.city = this.$getSync('CITY_NAME')
                this.getData()
            }
			
			this.getService()
        },
        methods: {
			getService() {
				this.$ajax('customerService', {
					
				}).then(ret => {
					this.service = ret.data
				});
			},
			
            goBanner(item) {
				// if (!uni.getStorageSync('userToken')) {
				//     this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
				//         uni.navigateTo({
				//             url: "/pages/login/login"
				//         })
				//     })
				// } else {
					
				// }
                if (item.type == 5) {
                    this.$gTo(`/pages/shop/cats?pId=${item.url}&title=${item.title}`)
                } else if (item.type == 12) {
                    this.$gTo(`/pages/calf/calf`)
                } else if (item.type == 13) {
                    this.$gTo(`/pages/people/people`)
                } else if (item.type == 14) {
                    this.$gTo(`/pages/drug/list`)
                } else if (item.type == 16) {
                    wx.openChannelsUserProfile({
                        finderUserName: 'sphE5EoinY7ht9n',//视频号id,以‘sph’开头
                        // feedId: array[e].url,//视频feedId
                        success (res) {
                            console.log('跳转成功',res)
                        },
                        fail(err) {
                            console.log('跳转失败',err)
                        }
                    })
                }
            },
            
            // type: 0图文 1商品 5商品列表 12牛源信息 13人力/土地 14兽医兽药 15兽医兽药信息 16直播大厅（视频号）
            // url：是跳转id
            toGuangGao(e, array) {
                console.log(e, array)
				if (array[e].type == 0) {
				    this.$gTo(`/pages/news/list`)
				} else if (array[e].type == 1) {
				    this.$gTo(`/pages/shop/goods?id=${array[e].url}`)
				} else if (array[e].type == 5) {
				    this.$gTo(`/pages/shop/cats?pId=${array[e].url}`)
				} else if (array[e].type == 12) {
				    this.$gTo(`/pages/calf/calf`)
				} else if (array[e].type == 13) {
				    this.$gTo(`/pages/people/people`)
				} else if (array[e].type == 14) {
				    this.$gTo(`/pages/drug/list`)
				} else if (array[e].type == 15) {
				    this.$gTo(`/pages/drug/detail?id=${array[e].url}`)
				} else if (array[e].type == 16) {
					if (array[e].url) {
						wx.openChannelsActivity({
						    finderUserName: 'sphE5EoinY7ht9n',//视频号id,以‘sph’开头
						    feedId: array[e].url,//视频feedId
						    success (res) {
						        console.log('跳转成功',res)
						    },
						    fail(err) {
						        console.log('跳转失败',err)
						    }
						})
					} else {
						wx.openChannelsUserProfile({
						    finderUserName: 'sphE5EoinY7ht9n',//视频号id,以‘sph’开头
						    success (res) {
						        console.log('跳转成功',res)
						    },
						    fail(err) {
						        console.log('跳转失败',err)
						    }
						})
					}
				}
            },
            
            // 去公告详情
            toDetails(item, e) {
				this.$gTo('/pages/notice/detail?id=' + item[e].id)
                // if (!uni.getStorageSync('userToken')) {
                //     this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                //         uni.navigateTo({
                //             url: "/pages/login/login"
                //         })
                //     })
                // } else {
                //     this.$gTo('/pages/notice/detail?id=' + item[e].id)
                // }
            },
            
            goNotice() {
				this.$gTo(`/pages/notice/list`)
                // if (!uni.getStorageSync('userToken')) {
                //     this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                //         uni.navigateTo({
                //             url: "/pages/login/login"
                //         })
                //     })
                // } else {
                //     this.$gTo(`/pages/notice/list`)
                // }
            },
            
            goNews(id) {
				if (id > 0) {
				    this.$gTo(`/pages/news/detail?id=${id}`)
				} else {
				    this.$gTo(`/pages/news/list`)
				}
                // if (!uni.getStorageSync('userToken')) {
                //     this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
                //         uni.navigateTo({
                //             url: "/pages/login/login"
                //         })
                //     })
                // } else {
                //     if (id > 0) {
                //         this.$gTo(`/pages/news/detail?id=${id}`)
                //     } else {
                //         this.$gTo(`/pages/news/list`)
                //     }
                // }
            },
            
            getData() {
            	this.$ajax('index', {
            		userToken: this.$getSync('userToken'),
            		region: this.$getSync('CITY_ID'), //位置
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
                        
                        this.bannerx = []
                        if (this.data.slides.length > 0) {
                            this.data.slides.forEach(cur => {
                                this.bannerx.push({image: cur.image_uri})
                            })
                        }
                        
                        this.notice = []
                        if (this.data.notice.length > 0) {
                            this.data.notice.forEach(cur => {
                                this.notice.push(cur.title)
                            })
                        }
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            getCity(){
            	this.$ajax('get_city', {
            		userToken: this.$getSync('userToken'),
                    // code: this.$getSync('CITY_ID')
            	}).then(ret => {
            		if (ret.status == 0) {
                        this.$setSync('CITY_NAME', ret.data.name)
                        this.$setSync('CITY_ID', ret.data.code)
                        this.city = ret.data.name
                        this.getData()
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style scoped lang="scss">
    .content {
        background: #fafafa;
        min-height: 100vh;
    }

    .nav_menu {
        margin-left: 24rpx;
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 30rpx;

        .ico {
            width: 28rpx;
            height: 30rpx;
            margin-right: 10rpx;
        }

        .arrow {
            width: 8rpx;
            height: 14rpx;
            margin-left: 12rpx;
        }
    }

    .top_bannerx {
        width: 100%;
        height: 332rpx;
        position: relative;

        &:after {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            background: linear-gradient(#00734c, transparent);
            height: 200rpx;
            width: 100%;
        }

        .bannerx {
            width: 700rpx;
            height: 300rpx;
            margin: 0 auto;
            border-radius: 18rpx;
            position: relative;
            z-index: 1;
        }
    }

    .noticex {
        width: 700rpx;
        height: 84rpx;
        border-radius: 18rpx;
        border: 1rpx solid #d5d5d5;
        margin: 0 auto 36rpx;
        display: flex;
        align-items: center;
        padding: 0 22rpx;

        .ico {
            width: 72rpx;
            height: 40rpx;
        }

        .txx {
            flex: 1;
            width: 0;
        }

        .morex {
            height: 50rpx;
            border-left: 1rpx solid #e6e6e6;
            padding-left: 30rpx;
            display: flex;
            align-items: center;

            .tt {
                font-size: 24rpx;
                color: #000000;
                margin-right: 8rpx;
            }

            .more {
                width: 18rpx;
                height: 18rpx;
            }
        }
    }

    .nav_list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 0 5rpx;

        .item {
            width: 185rpx;
            margin-bottom: 16rpx;

            .ico {
                width: 70rpx;
                height: 70rpx;
                display: block;
                margin: 0 auto;
            }

            .tt {
                font-size: 26rpx;
                color: #333333;
                text-align: center;
                line-height: 54rpx;
                width: 100%;
            }
        }
    }

    .adx1 {
        width: 700rpx;
        height: 160rpx;
        border-radius: 18rpx;
        margin: 0 auto 20rpx;
    }

    .market {
        width: 700rpx;
        margin: 0 auto 20rpx;

        .top_title {
            display: flex;
            justify-content: space-between;
            height: 94rpx;
            align-items: center;

            .mex {
                display: flex;
                align-items: center;

                .ico {
                    width: 47rpx;
                    height: 41rpx;
                    margin-right: 6rpx;
                }

                .tt {
                    font-size: 34rpx;
                    color: #333333;
                }
            }

            .more {
                font-size: 24rpx;
                color: #333333;
            }
        }

        .tablex {
            width: 700rpx;
            border-radius: 18rpx;

            .titlex {
                width: 100%;
                height: 80rpx;
                text-align: center;
                line-height: 80rpx;
                font-size: 28rpx;
                color: #375eb4;
                font-weight: 700;
                background: #f1f5fe;
                border-radius: 18rpx 18rpx 0 0;
            }

            .list {
                display: flex;
                justify-content: space-between;
                border-top: 1rpx solid #e7e7e7;
                flex-wrap: wrap;

                .item {
                    width: 344rpx;
                    display: flex;
                    border: 1rpx solid #e7e7e7;
                    border-top: 0;
                    height: 59rpx;
                    line-height: 58rpx;
                    color: #656565;
                    text-align: center;
                    font-size: 22rpx;

                    &.green {
                        color: #00734c;
                    }

                    &.red {
                        color: #f62a2a;
                    }

                    .t1 {
                        flex: 1;
                        width: 0;
                    }

                    .t2 {
                        border-left: 1rpx solid #e7e7e7;
                        border-right: 1rpx solid #e7e7e7;
                        height: 59rpx;
                        width: 88rpx;
                    }

                    .t3 {
                        width: 90rpx;
                    }
                }
            }

            .tlx {
                width: 100%;
                border-radius: 0 0 18rpx 18rpx;
                height: 70rpx;
                line-height: 70rpx;
                text-align: center;
                font-size: 22rpx;
                color: #333333;
                background: #edeef0;
            }
        }
    }

    .news {
        width: 700rpx;
        margin: 0 auto;

        .top_title {
            display: flex;
            justify-content: space-between;
            height: 94rpx;
            align-items: center;

            .mex {
                display: flex;
                align-items: center;

                .ico {
                    width: 47rpx;
                    height: 41rpx;
                    margin-right: 6rpx;
                }

                .tt {
                    font-size: 34rpx;
                    color: #333333;
                }
            }

            .more {
                font-size: 24rpx;
                color: #333333;
            }
        }

        .list {
            width: 700rpx;
            background: #fff;
            border-radius: 18rpx;
            padding: 40rpx 24rpx;

            .item {
                display: flex;
                justify-content: space-between;
                margin-bottom: 40rpx;

                .pic {
                    width: 220rpx;
                    height: 150rpx;
                    border-radius: 14rpx;
                    margin-right: 20rpx;
                }

                .texx {
                    flex: 1;
                    width: 0;
                    padding-top: 6rpx;

                    .t1 {
                        font-size: 30rpx;
                        color: #000;
                        line-height: 42rpx;
                        font-weight: 700;
                    }

                    .spx {
                        font-size: 24rpx;
                        color: #848484;
                        line-height: 36rpx;
                        height: 72rpx;
                    }

                    .times {
                        font-size: 24rpx;
                        color: #848484;
                    }
                }

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
</style>